<div class="page-header settingheading">
  <h4>Profile Picture Settings</h4>
</div>
<?php echo form_open_multipart(null, 'id="profile_picture_form" class="form-horizontal"'); ?>
	<div class="row">
		<div class="col-md-3">
			<div class="thumbnail">
				<img id="preview" src="<?php echo base_url(); ?>assets/uploads/.thumbs/images/zap/<?php echo $zapmember['photo'] == '' ? DEFAULT_IMG : $zapmember['photo'] ; ?>" style="height:150px;width:100%" alt="...">
			</div>
		</div>
		<div class="col-md-7">
			<div class="alert alert-danger">
				<span>Photo size must be 200px*250px </span>
			</div>
			<div class="input-group">
				<input type="file" id="lefile" style="display:none" name="photo">
				<input id="photocover" class="form-control" type="text">
				<div class="input-group-btn">
					<a class="btn btn-success" onclick="$('input[id=lefile]').click();">Browse</a>
				</div>
				<script>
					$('input[id=lefile]').change(function(){
						$("#photocover").val($(this).val());
						var files = $('#lefile').prop("files")
						if (files && files[0])
						{
							var reader = new FileReader();
							reader.onload = function (e) {
								$('#preview').attr('src', e.target.result);	
							};
							reader.readAsDataURL(files[0]);
						}	
					});
				</script>
			</div>
		</div>
	</div>
			
	<div class="alert alert-zap text-right">
		<button type="submit" class="btn btn-primary btn-xs">Update</button>
	</div>
<?php echo form_close(); ?>
		